<template>
  <transition-group name="breadcrumb">
    <a-breadcrumb>
      <a-breadcrumb-item
        v-for="(item, index) in breadcrumbData"
        :key="item.meta.title + index"
      >
        <span v-if="breadcrumbData.length <= 1">{{
          $t(`route.${item.meta.title}`)
        }}</span>
        <a v-else @click.prevent="onLinkClick(item)">{{
          $t(`route.${item.meta.title}`)
        }}</a>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </transition-group>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'
const route = useRoute()
const breadcrumbData = ref([])

const getBreadcrumbData = () => {
  breadcrumbData.value = route.matched.filter(
    (item) => item.meta && item.meta.title
  )
}

watch(
  route,
  () => {
    getBreadcrumbData()
  },
  {
    immediate: true
  }
)

const onLinkClick = (item) => {}
</script>
<style scoped lang="scss"></style>
